<template>
	<view class="bgbox">
		<un-navbar titleText="我的" bgColor="rgba(0,0,0,0)" :isBack="false"></un-navbar>
		<view v-if="state">
			<view class="flex justify_center">
				<image class="userimg ma_top60 bg_white" :src="state.avatar || 'https://vpay-static.oss-cn-shenzhen.aliyuncs.com/static/unmanned/images/main/morentouxiang.png'"> </image>
			</view>
			<view class="flex justify_center pa_top40 f_s40 te_black3 fw_bold">{{state.name_cn}}</view>
			<view class="flex justify_center pa_top20 f_s28 te_black9">手机号：{{maskedPhoneNumber}}</view>
			<view class="edit_btn bo_radius20 bg_white f_s28 te_center" @click="goPersonalinfo">编辑个人资料</view>
			<view class="ma_lr24 bg_white bo_radius22 pa_lr20 pa_tb10 ma_bottom50">
				<view class="flex align_center" @click="goCollection">
					<image class="icon" src="@/static/image/my/2.png"></image>
					<view class="flex align_center justify_between line_bottom flex1 pa_tb30 pa_lr10">
						<view class="f_s30 fw_bold te_black3">我的收藏</view>
						<view class="iconfont i-right f_s24 te_black9"></view>
					</view>
				</view>
				<view class="flex align_center" @click="goSetup">
					<image class="icon" src="@/static/image/my/1.png"></image>
					<view class="flex align_center justify_between flex1 pa_tb30 pa_lr10">
						<view class="f_s30 fw_bold te_black3">设置</view>
						<view class="iconfont i-right f_s24 te_black9"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { myget_user_info } from '@/api/chat'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref, reactive, computed } from 'vue'
	import { useStore } from 'vuex'
	const store = useStore()

	const state = ref<any>('')
	const maskedPhoneNumber = computed(() => {
		const phoneNumber = state.value.phone_number
		if (!phoneNumber) return ''
		return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
	});

	onShow(() => {
		myget_user_info({}).then((res:any) => {
			state.value = res.data
			uni.setStorageSync('myinfo', res.data)
			store.commit('setmyinfo', res.data)
		})
	})

	const goPersonalinfo = 	() => {
		uni.navigateTo({
			url: '/subPackages/my/personalinfo/index'
		})
	}
	const goCollection = () => {
		uni.navigateTo({
			url: '/subPackages/my/collection/index'
		})
	}
	const goSetup = () => {
		uni.navigateTo({
			url: '/subPackages/my/setup/index'
		})
	}
</script>

<style scoped lang="scss">
	.bgbox {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(180deg, #DAFEFF 0%, #F1F4F4 50%, #F1F4F4 100%);
		.userimg {
			width: 306upx;
			height: 306upx;
			border-radius: 120upx;
		}
		.edit_btn{
			width: 256upx;
			height: 72upx;
			line-height: 74upx;
			margin: 40upx auto 98upx auto;
		}
		.icon{
			width: 40upx;
			height: 40upx;
			margin: 0 22upx 0 12upx;
		}
		.line_bottom{
			border-bottom: 1px solid #F6F6F6;
		}
	}
</style>